<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <title>Sign in &laquo; Admin</title>
  <link rel="stylesheet" href="/public/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="/public/assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href="/public/assets/css/admin.css">
  <script src="/public/assets/vendors/nprogress/nprogress.js"></script>
</head>

<body>
  <div class="login">
    <form class="login-wrap">
      <img class="avatar" src="/public/assets/img/default.png">
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong> 用户名或密码错误！
      </div> -->
      <div class="form-group">
        <label for="email" class="sr-only">邮箱</label>
        <input id="email" name="admin_email" type="email" class="form-control" placeholder="邮箱" autofocus>
      </div>
      <div class="form-group">
        <label for="password" class="sr-only">密码</label>
        <input id="password" name="admin_pwd" type="password" class="form-control" placeholder="密码">
      </div>
      <button id="loginBtn" class="btn btn-primary btn-block">登 录</button>
    </form>
  </div>
  <script src="/public/assets/vendors/jquery/jquery.js"></script>
  <script src="/node_modules/jquery-validation/dist/jquery.validate.min.js"></script>
  <script src="/node_modules/jquery-validation/dist/localization/messages_zh.min.js"></script>
  <script>
    const $loginForm = $('.login-wrap')
    $loginForm.validate({
      rules: {
        admin_email: {
          required: true,
          email: true
        },
        admin_pwd: {
          required: true
        }
      },
      messages: {
        admin_email: {
          required: '请填写邮箱',
          email: '邮箱格式不正确'
        },
        admin_pwd: {
          required: '请填写密码'
        }
      },
      submitHandler: login
    })

    function login() {
      $.ajax({
        url: '/api/login',
        type: 'get',
        data: $loginForm.serialize(),
        dataType: 'json',
        success: (res) => {
          console.log('loginRes---', res)
          if (res.success) {
            window.location.href = '/admin'
          } else {
            alert(res.msg)
          }
        },
        error: (err) => {
          console.log(err)
        }
      })
    }
  </script>
</body>

</html>